<template>
  <BasePage>
    <n-tabs
      id="data-tabs"
      v-model:value="state.current"
      type="line"
      animated
      :class="['h-full', appStore.isDeep ? 'deep' : 'light']"
      @before-leave="onBeforeLeave"
    >
      <n-tab-pane tab="被测对象" name="testObject">
        <TestObjectList />
      </n-tab-pane>
      <n-tab-pane tab="资源数据" name="resourceData">
        <MyTab
          v-model:value="state.resourceType"
          class="mb-16"
          :options="[
            { label: '数据集', value: 'dataSet' },
            { label: '仿真数据', value: 'simulation' },
          ]"
        />
        <DataSetList v-if="state.resourceType === 'dataSet'" />
        <div v-if="state.resourceType === 'simulation'" class="mt-200 flex-col items-center">
          <img :src="appStore.nodataImg" />
          <div :class="['text-14 font-400', appStore.isDeep ? 'color-#FFFFFFCC' : 'color-#817E92']">
            暂无数据
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane tab="测试结果记录" name="testRecord">
        <TestRecordList />
      </n-tab-pane>
      <n-tab-pane tab="评估结果记录" name="evaluateRecord">
        <EvaluateRecordList />
      </n-tab-pane>
    </n-tabs>
  </BasePage>
  <!-- <MainCard class="flex-col">
    <div id="data-title" :class="['title relative mb-9', appStore.isDeep ? 'deep' : 'light']">
      <div class="label">数据管理</div>
    </div>
    <BoxContent padding="0 25px 25px">
      <n-tabs
        id="data-tabs"
        v-model:value="state.current"
        type="line"
        animated
        :class="['h-full', appStore.isDeep ? 'deep' : 'light']"
        @before-leave="onBeforeLeave"
      >
        <n-tab-pane tab="被测对象" name="testObject">
          <TestObjectList />
        </n-tab-pane>
        <n-tab-pane tab="资源数据" name="resourceData">
          <MyTab
            v-model:value="state.resourceType"
            class="mb-16"
            :options="[
              { label: '数据集', value: 'dataSet' },
              { label: '仿真数据', value: 'simulation' },
            ]"
          />
          <DataSetList v-if="state.resourceType === 'dataSet'" />
          <div v-if="state.resourceType === 'simulation'" class="mt-200 flex-col items-center">
            <img :src="appStore.nodataImg" />
            <div
              :class="['text-14 font-400', appStore.isDeep ? 'color-#FFFFFFCC' : 'color-#817E92']"
            >
              暂无数据
            </div>
          </div>
        </n-tab-pane>
        <n-tab-pane tab="测试结果记录" name="testRecord">
          <TestRecordList />
        </n-tab-pane>
        <n-tab-pane tab="评估结果记录" name="evaluateRecord">
          <EvaluateRecordList />
        </n-tab-pane>
      </n-tabs>
    </BoxContent>
  </MainCard> -->
</template>
<script setup lang="jsx">
import { useAppStore } from '@/store'
import TestObjectList from './modules/TestObjectList.vue'
import TestRecordList from './modules/TestRecordList.vue'
import EvaluateRecordList from './modules/EvaluateRecordList.vue'
import DataSetList from './modules/DataSetList.vue'
defineOptions({
  name: 'DataPage',
})
const appStore = useAppStore()
const state = reactive({
  current: 'testObject',
  resourceType: 'dataSet',
})
function onBeforeLeave(name) {
  if (name === 'resourceData') {
    state.resourceType = 'dataSet'
  }
  return true
}
</script>
<style lang="scss" scoped>
.title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &.light {
    margin-bottom: 4px;
    .label {
      font-size: 32px;
      font-weight: 500;
      color: #030712;
      line-height: 47px;
    }
  }
  &.deep {
    height: 54px;
    .label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 24px;
      color: #4ddef4;
      &::before {
        content: '';
        display: block;
        width: 30px;
        height: 22px;
        background: url(@/assets/images/deep-title-icon.png);
      }
    }
  }
}
:deep(.n-tabs) {
  &.light {
    .n-tabs-bar {
      height: 4px;
      border-radius: 2px !important;
    }
  }
  &.deep {
    .n-tabs-nav {
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 104px;
        height: 27px;
        background-image: url(@/assets/images/deep-right-logo.png);
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .n-tabs-pane-wrapper {
    flex: 1;
    .n-tab-pane {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
